import * as c from '@/services/consts';
import {
  DrawerForm,
  ProFormInstance,
  ProFormSelect,
} from '@ant-design/pro-form';
import { Col, Row, Tag } from 'antd';
import React, { useRef, useState } from 'react';

type VpnServerFormProps = {
  visible: boolean;
  current: API.VpnGroupMonitorModel | undefined;
  urlGrafana: string | undefined;
  onCancel: () => void;
};

const VpnServerForm: React.FC<VpnServerFormProps> = (props) => {
  const { visible, current, onCancel, urlGrafana } = props;

  if (!visible) {
    return null;
  }
  const [urlGrafanaFormHour, setUrlGrafanaFormHour] =
    useState<string>('now-24h');

  const getAllInstIds = () => {
    if (!current) return '';
    let ids = '';
    for (let item of current?.data) {
      if (ids != '') ids = ids + '|';
      ids = `${ids}${item.ip}:9100`;
    }
    return ids;
  };

  const formRef = useRef<ProFormInstance>();

  return (
    <DrawerForm<API.VpnGroupMonitorModel>
      open={visible}
      initialValues={current}
      title={
        <span>
          组流量监控 <Tag color="blue">{current?.name}</Tag>
        </span>
      }
      formRef={formRef}
      autoFocusFirstInput
      width={1200}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        closable: false,
        onClose: onCancel,
        // maskClosable: false,
      }}
      submitter={{
        render: (props, defaultDoms) => {
          return [
            // ...defaultDoms,
            // <Button
            //   key="ok"
            //   onClick={() => {
            //     props.submit();
            //   }}
            // >
            //   ok
            // </Button>,
          ];
        },
      }}
    >
      <Row gutter={24}>
        <Col span={12}>
          <ProFormSelect
            name="grafanaHour"
            label="流量监控时间"
            width={200}
            allowClear={true}
            initialValue={'now-24h'}
            options={c.GrafanaHours}
            fieldProps={{
              onChange: (val) => {
                console.log(val);
                setUrlGrafanaFormHour(val);
              },
            }}
          />
        </Col>
        <Col span={12}></Col>

        <Col span={24}>
          <iframe
            src={`${urlGrafana}&from=${urlGrafanaFormHour}&var-inst_ids=${getAllInstIds()}`}
            width="1150"
            height="1000"
            frameborder="0"
          ></iframe>
        </Col>
      </Row>
    </DrawerForm>
  );
};

export default VpnServerForm;
